<template>
  <div class="app">
    <!-- 父传子：
    父访问子：（父传子：父调用子）  拿到子组件vue实例对象（子组件的this）
       1:在子组件标签定义一个ref  ref=值
       2:访问子组件this  ===this.$refs.ref值
    子传父
       子访问父 :（子传父：子调用父）子获取父的this
         this.$parent===父组件的this
     -->
    <br />
    {{ appMsg }}
    <br />
    <button @click="btnClick">我要修改son的属性</button>
    <son ref="son"></son>
    <h3>watch事件</h3>
    <input type="text" v-model="obj.xxx" />
  </div>
</template>
<script>
// 组件套用组件  1:导入   2：注册   3：使用
/*watch:侦听器（某个值（通过this访问的值）的change事件）
定义:  watch:{
     方法名:(写出需要侦听的值,去掉this,加上引号)
    "obj.xxx"(newVal,oldVal){
newVal:当前值,
oldVal:上一刻的值
    }
}

*/
// import xxx2 from './assets/comm.js' //var xxx2=100
import { a, b, c, d } from './assets/comm.js' //{a,b,c}= {a:100,b:200,c:function}
import son from './components/son'
export default {
  data () {
    return {
      appMsg: '我是父组件的data变量',
      obj: {
        xxx: 123
      }
    }
  },
  watch: {
    'obj.xxx' (newVal, oldVal) {
      window.console.log('newVal:', newVal)
      window.console.log('oldVal:', oldVal)
    }
  },
  created () {
    // alert(xxx2)
    window.console.log('a:', a)
    window.console.log('b:', b)
    c()
    window.console.log('d:', d)
  },

  components: {
    son
  },
  methods: {
    btnClick () {
      this.$refs.son.sonMsg = Math.random() * 999
      window.console.log(this.$refs.son)
    }
  }
}
</script>
<style>
.app {
  width: 600px;
  height: 600px;
  border: 10px solid red;
}
</style>
